<template>
  <div class="video-directory">
    <div class="video-wrap btn" v-for="(item, index) in videodirectory" :key="index">
      <h3 class="chapter">
        <span>{{ item.name }}</span
        ><img
          class="fr"
          src="../../../../../../assets/image/onlineStudent/top-ico.png"
          alt=""
        />
      </h3>
      <ul class="video">
        <li v-for="(chapter, index) in item.chapters" :key="index">
          <div class="info">
            <div class="name">
              <div class="left">
                <span class="color-656565">第1节</span>
                <img
                  src="../../../../../../assets/image/onlineStudent/play-ico.png"
                  alt=""
                />
                <span>{{ chapter.name }}</span>
              </div>
              <div class="right">
                12分47秒
              </div>
            </div>
            <div class="progress" id="progress">
              <el-progress :percentage="50"></el-progress>
            </div>
          </div>
        </li>
      </ul>
      <div class="more btn">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getVideoDirectory();
  },
  data(){
    return{
      videodirectory:[]
    }
  },
  methods:{
    getVideoDirectory(){
      this.$axios.post("/course/recordedarr", {
        school_dns:'testwo.admin.longde999.cn',
        id:this.$route.query.id,
        nature:this.$route.query.nature
      }).then(res => {
        this.videodirectory= res.data;
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../../common/index.less';
.color-656565 {
  color: #656565;
}
img {
  margin: 0 10px;
  margin-left: 20px;
}
.video-wrap {
  .chapter();
  .video {
    li {
      padding: 20px 10px;
      .name {
        .flex(space-between, center);
        margin-bottom: 10px;
      }
    }
  }
}
.more {
  margin: 30px;
  text-align: center;
  color: #27a4fe;
}
</style>
